<template>
  <div class="wrapper">
    <v-head></v-head>
    <v-sidebar></v-sidebar>
    <topToolBar></topToolBar>
    <div class="content-box" :class="{ 'content-collapse': collapse }">
      <!-- 快捷按钮 -->
      <!-- <div class="icon-wrap"> -->
      <!-- <div
                class="icon-con"
                v-for="(item,index) in mapOperationsList"
                :class="{'hasColor': item.active}"
                :key="index"
                @click="clickInstallationShow(item, index)"
              >
      <span>{{item.name}}</span>-->
      <!-- </div> -->
      <!-- </div> -->
      <el-row>
        <el-button
          v-if="isShowBtnRealTime"
          size="mini"
          plain
          icon="el-icon-truck"
          type="primary"
          @click="getDataRealTime"
          >实时在线统计</el-button
        >


        <el-button
        v-if="isShowBtnDataV"
          size="mini"
          plain
          icon="el-icon-data-analysis"
          type="primary"
          @click="turnDataV"
          >数据看板</el-button
        >
        <!-- <el-button
          v-if="isShowBtnDownloadZIP"
          size="mini"
          plain
          icon="el-icon-document-copy"
          type="primary"
          @click="getDownloadZIP"
          >作业报表下载</el-button
        > -->
        <el-button
          v-if="isShowBtnDownloadZIP_Today"
          size="mini"
          plain
          icon="el-icon-document-copy"
          type="primary"
          @click="getDownloadZIP_Today"
          >当日作业报表下载</el-button
        >
        <el-button
          v-if="isShowBtnVideo"
          size="mini"
          plain
          icon="el-icon-monitor"
          type="primary"
          @click="windowToHuaBao"
          >视频监控</el-button
        >

       <!-- <span
        class="buttonI"
        title="实时在线统计"
        @click="getDataRealTime"
        style="margin-left: 5px"
        > <img :src="legend.routeTJ" alt  style="height: 15px;"/> 实时在线统计</span
        > -->

       <!-- <span
        class="buttonI2"
        title="实时在线统计"
        @click="getDataRealTime"
        style="margin-left: 5px"
        > <img :src="legend.routeTJ" alt  style="height: 35px;"/> </span
        > -->
      </el-row>
      <v-tags></v-tags>
      <div class="content" :class="isFull ? 'fixed' : ''">
        <transition name="move" mode="out-in">
          <keep-alive :include="tagsList">
            <router-view></router-view>
          </keep-alive>
        </transition>
        <el-backtop target=".content"></el-backtop>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';

import topToolBar from '@/views/Comprehensive/TopToolBar/index.vue'

import bus from './bus';
import eventBus from '@/eventBus.js';

// import imgrouteSSZX from '@/assets/img/Menu/SSZX.png'
// import imgrouteTJ from '@/assets/img/Menu/TJ.png'

export default {
  data () {
    return {
      tagsList: [],
      collapse: false,
      isFull: false,
      isShowBtnRealTime: false,
      isShowBtnVideo: false,
      isShowBtnDataV: false,
      isShowBtnDownloadZIP: false,
      isShowBtnDownloadZIP_Today: false,
      legend: {
        // routeSSZX: imgrouteSSZX,
        // routeTJ: imgrouteTJ,
      },
      buttShowList: {
          "00103": false,
          "0010801": false,
          "0010802": false,
          "00203": false,
          "00303": false,
          "00402": false,
          "00504": false,
          "00603": false,
      },
      buttfalg:false,
    };
  },
  components: {
    vHead,
    vSidebar,
    vTags,
    topToolBar
  },
  created () {
    
    if (!localStorage.getItem('CLIENT_NO')) {
      this.$router.push({
        path: '/login'
      })
    }
    bus.$on('collapse-content', msg => {
      this.collapse = msg;
    });
    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on('tags', msg => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });
    // 全屏
    eventBus.$on('contentToFullScreen', () => {
      this.isFull = true;
    })
    // 退出全屏
    eventBus.$on('contentToDefaultScreen', () => {
      this.isFull = false;
    })
    this.isShowShortcutBtn()
    this.getRoleList()
  },
  methods: {
    // 获取菜单列表
      async getRoleList() {
      const params = {
        userName: localStorage.getItem('LOGIN_NAME'),
        // userName: 'JSCESHI',
        menuID: localStorage.getItem('CurrentService'),
      }
      const { data } = await this.$Http.get('Role/GetRoleList', { params })
      this.buttData = data
        // console.log('菜单：')
        // console.log(this.buttData)
        data.filter((item) => {
          this.buttShowList[item.ID] = true
        })
        // console.log('数据看板：')
        // console.log(this.buttShowList)
        return Promise.resolve()
    },
    // 控制快捷按钮显示
    isShowShortcutBtn () {
      this.getRoleList().then(val => { 
      // console.log("显示")
      this.isShowBtnRealTime = false;
        this.isShowBtnDataV = false;
        this.isShowBtnDownloadZIP = false;
        this.isShowBtnVideo = false;
        if (localStorage.getItem('CurrentService') === '019') {
        this.isShowBtnRealTime = false;
        this.isShowBtnVideo = false;
        this.isShowBtnDataV = false;
        this.isShowBtnDownloadZIP = true;
        this.isShowBtnDownloadZIP_Today = false;
      }
      if (localStorage.getItem('CurrentService') === '001') {
        this.isShowBtnRealTime = true;
        this.isShowBtnVideo = true;
        if (this.buttShowList["00103"]) {
          this.isShowBtnDataV = true;
        }
        if (this.buttShowList["0010801"]) {
          this.isShowBtnDownloadZIP = true;
        }
        if (this.buttShowList["0010802"]) {
          this.isShowBtnDownloadZIP_Today = true;
        }
      }
      if (localStorage.getItem('CurrentService') === '003') {
        this.isShowBtnRealTime = true;
        this.isShowBtnDownloadZIP = true;
        // this.isShowBtnVideo = true;
        if (this.buttShowList["00303"]) {
          this.isShowBtnDataV = true;
        }
      }
      if (localStorage.getItem('CurrentService') === '002') {
        this.isShowBtnRealTime = true;
        if (this.buttShowList["00203"]) {
          this.isShowBtnDataV = true;
        }
        this.isShowBtnDownloadZIP = true;
        // this.isShowBtnVideo = true;
      }
      if (localStorage.getItem('CurrentService') === '004') {
        this.isShowBtnRealTime = true;
        if (this.buttShowList["00402"]) {
          this.isShowBtnDataV = true;
        }
        this.isShowBtnDownloadZIP = true;
        // this.isShowBtnVideo = true;
      }
      if (localStorage.getItem('CurrentService') === '005') {
        // this.isShowBtnRealTime = true;
        if (this.buttShowList["00504"]) {
          this.isShowBtnDataV = true;
        }
        // this.isShowBtnDownloadZIP = true;
        // this.isShowBtnVideo = true;
      }
      if (localStorage.getItem('CurrentService') === '006') {
        this.isShowBtnRealTime = true;
        if (this.buttShowList["00603"]) {
          this.isShowBtnDataV = true;
        }
        this.isShowBtnDownloadZIP = true;
        // this.isShowBtnVideo = true;
      }
      });
    },
    turnDataV () {
      if (localStorage.getItem('CurrentService') === '001') {
        this.$router.push({
          path: '/VehicleDataV'
        })
      }
      if (localStorage.getItem('CurrentService') === '003') {
        this.$router.push({
          path: '/RubbishDataV'
        })
      }
      if (localStorage.getItem('CurrentService') === '002') {
        this.$router.push({
          path: '/WorkerDataV'
        })
      }
      if (localStorage.getItem('CurrentService') === '004') {
        this.$router.push({
          path: '/WCDataV'
        })
      }
      if (localStorage.getItem('CurrentService') === '005') {
        this.$router.push({
          path: '/CarServeDataV'
        })
      }
      if (localStorage.getItem('CurrentService') === '006') {
        this.$router.push({
          path: '/ComprehensiveDataV'
        })
      }
    },
    getDataRealTime () {
      if (localStorage.getItem('CurrentService') === '001') {
        eventBus.$emit('Realtime_Shortcut_Vehicle', this.statisticalData)
      }
      if (localStorage.getItem('CurrentService') === '003') {
        eventBus.$emit('Realtime_Shortcut_Rubbish', this.statisticalData)
      }
      if (localStorage.getItem('CurrentService') === '002') {
        eventBus.$emit('Realtime_Shortcut_Worker', this.statisticalData)
      }
      if (localStorage.getItem('CurrentService') === '004') {
        eventBus.$emit('Realtime_Shortcut_WC', this.statisticalData)
      }
      if (localStorage.getItem('CurrentService') === '006') {
        eventBus.$emit('Realtime_Shortcut_Comprehensive', this.statisticalData)
      }
    },
    getDownloadZIP () {
      eventBus.$emit('Download_Vehicle')
    },
    getDownloadZIP_Today () {
      eventBus.$emit('Download_Vehicle_Today')
    },
    windowToHuaBao () {
      if (localStorage.getItem('VIDEO_UID') === '0'){
        this.$message.warning('当前账号不支持视频监控')
        return;
      }
      var url = 'http://111.160.78.62:88/808gps/index.html?account=' + localStorage.getItem('VIDEO_UID') + '&password=' + localStorage.getItem('VIDEO_PWD') + '&clientLogin=2'
      console.log('windowToHuaBao=' + url)
      window.open(url)
    }
  },
};
</script>

<style scoped lang="less">
.content.fixed {
  position: fixed;
  top: -12px;
  left: -10px;
  right: -10px;
  height: calc(100% + 24px);
  z-index: 9999;
}
.el-row {
  margin: 5px;
}
.buttonI {
  color: #007acc;
  background: #070808;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin: 5px;
  border: 1px solid #007acc;
  border-radius: 6px;
}
// .buttonI2 {
//   color: #007acc;
//   font-weight: bold;
//   height: 45px;
//   line-height: 38px;
//   text-align: center;
//   // vertical-align: middle;
//   // cursor: pointer;
//   padding: 5px 10px 5px 10px;
//   margin: 0px;
//   border: 1px solid #007acc;
//   border-radius: 6px;
// }
</style>
